<template lang="html">

  <section class="add-fe">
	   <mu-container>
		   <mu-form  ref="form" :model="validateForm" class="mu-demo-form" label-position="top" label-width="100">
			   <mu-form-item prop="select" label="选择所属分类">
					 <mu-select v-model="validateForm.select">
					   <mu-option v-for="(option,index) in options" :key="option.id" :label="option.title" :value="option.id"></mu-option>
					 </mu-select>
			   </mu-form-item>
			   
			   <mu-form-item prop="select1" label="选择所属版本">
			   					 <mu-select v-model="validateForm.select1">
			   					   <mu-option v-for="(option,index) in options1" :key="option.id" :label="option.title" :value="option.id"></mu-option>
			   					 </mu-select>
			   </mu-form-item>
			   <mu-form-item prop="select2" label="选择所属教学周期">
			   					 <mu-select v-model="validateForm.select2">
			   					   <mu-option v-for="(option,index) in options2" :key="option.id" :label="option.title" :value="option.id"></mu-option>
			   					 </mu-select>
			   </mu-form-item>
			   
			   
			 <!--  <mu-form-item prop="radio" label="显示与否">
			         <mu-radio v-model="validateForm.switch" value="1" label="显示"></mu-radio>
			         <mu-radio v-model="validateForm.switch" value="0" label="隐藏"></mu-radio>
			   </mu-form-item> -->
			   <mu-form-item prop="textarea" label="面试题批量上传,格式要求: 题与题直接换行" 
			   class="d-form-item" 
			   :rules="qFeRules" :error-text="qFeErrorText">
				 <mu-text-field multi-line :rows="10" :rows-max="15" v-model="validateForm.textarea" full-width></mu-text-field>
			   </mu-form-item>
			    <mu-form-item  class="d-btn-box">
				 <mu-button color="primary" @click="submit">批量保存</mu-button>
				 <mu-button @click="clear">重置</mu-button>
			   </mu-form-item>
		   </mu-form>
	   </mu-container>
  </section>
</template>

<script lang="js">
  import API from '../../api/index.js'
  export default  {
    name: 'add-fe',
    props: [],
    mounted() {

    },
    data() {
      return {
		queueQ:[],
		qFeRules: [
		  { validate: (val) => !!val, message: '内容不能为空'},
		  { validate: (val) => {
			  var arr = val.split("\n");
			  var isOk = true;
			  arr.forEach(item=>{
				  if(item.length > 100 && item.length < 2){
					  isOk = false;
				  }
			  })
			  return isOk;
		  }, message: '解析发现，题目长度不符合格式要求'}
		],
		qFeErrorText:'',
		options: [],//所属分类
		options1: [], //所属版本
		options2: [], //所属教学周期
		validateForm: {
			// switch: "0",
			select: '',
			select1: '',
			select2: '',
			textarea:''
		  }
      }
    },
	created(){
		// 隐藏tabs
		this.$bus.isTabsShow = false;
		//getIcktCategoryList,getIcktCourseVersionList,getIcktCourseDailyList,addCourseDailyContent
		API.getIcktCategoryList().then(res=>{ //获取分类
			if(res.success === 1){
				this.options = res.data;
				// this.validateForm.select = this.options[0].id;
			}
		})
		API.getIcktCourseVersionList().then(res=>{ //获取分类
			if(res.success === 1){
				this.options1 = res.data;
				this.validateForm.select1 = this.options1[0].id;
			}
		})
		API.getIcktCourseDailyList().then(res=>{ //获取分类
			if(res.success === 1){
				this.options2 = res.data;
				// this.validateForm.select2 = this.options2[0].id;
			}
		})
	},
    methods: {
		submit(){
			this.$refs.form.validate().then((result) => {
				if(result){
					this.addBatchTable();
				}
		    });
		},
		clear(){
			// 可有可无，因为是双向绑定this.$refs
			// this.$refs.form.clear();
			// 使用$set
			this.$set(this.validateForm, 'textarea', '');
			this.$set(this.validateForm, 'select', '');
			this.$set(this.validateForm, 'select2', '');
			// 或者使用重新赋值 
			// this.validateForm = Object.assign(this.validateForm, {textarea:''})
			
		},
		addBatchTable(){//批量添加面试题
			var arr = this.validateForm.textarea.split("\n");
			// var _switch = +this.validateForm.switch;
			var _select = this.validateForm.select;
			var _select1 = this.validateForm.select1;
			var _select2 = this.validateForm.select2;
			var textarea = "";
			arr.forEach(item=>{
				var params = {
					// switch: _switch,
					ickt_course_category_id:_select,
					ickt_course_version_id:_select1,
					ickt_course_daily_id:_select2,
					title: item.trim()
				}
				// console.log(params);
				this.addTable(params);
			})
			alert("导入成功");
			this.clear();
			// this.addTable();//执行添加
			// arr = arr.map(item=>{
			// 	return item.trim();
			// })
		},
		promiseAdd(){
			
		},
		async addTable(params){//添加面试题记录
			await API.addCourseDailyContent(params);
			// console.log(111,params);
			// let queueQ = this.queueQ;
			// let qLen = queueQ.length;
			// for(let i=0; i<qLen; i++){
			// 	let res = await API.addQfe(queueQ[i]);
			// 	// console.log(i,res, queueQ[i]);
			// }
			// if(res.success === 1 && qLen > 0)
			
		}
    },
    computed: {

    }
}
</script>

<style>
  .add-fe {

  }

.mu-form-item-label{
	  width: auto !important;
  }
.d-btn-box{
  text-align: center;
}
.d-btn-box>button{
	margin-right: 20px;
}
</style>
